<template>
    <ZWDrawer ref="zwRef">
        <div class="container">
            <el-input
                v-model="nickname"
                clearable
                class="user-nickname"
                placeholder="请输入用户昵称"
                @change="changeNickname"></el-input>
            <div class="container-table">
                <ZwTable
                    ref="tableRef"
                    class="table-box"
                    tab-h="initial"
                    :fetch-api="fetchApi()"
                    :close-loading="true"
                    :option="tableOption"
                    :fetch-params="state.searchParams">
                </ZwTable>
            </div>
        </div>
    </ZWDrawer>
    <!---打卡记录-->
    <clockRecords ref="clockRecordsRef"></clockRecords>
</template>
<script lang="tsx" setup>
import { ref, reactive, computed, onActivated, onMounted, onUnmounted, nextTick, defineAsyncComponent } from 'vue';
import ZWDrawer from '@/components/ZWDrawer.vue';
import ZwTable from '@/components/zw/table1.0/Table';
import clockRecords from './clockRecords.vue';
import { punchCardList } from '@/api/smartMarketing/community/communityCheckIn';
import { deepCopy } from '@/utils/helper';
import { QuestionFilled } from '@element-plus/icons-vue';
import { reNderUserDetail, renderGroupDetail } from './longName.tsx';
import { useRoute } from 'vue-router';

const route = useRoute();
const zwRef = ref<HTMLElement | null>(null);
const clockRecordsRef = ref<HTMLElement | null>(null);
const nickname = ref(); // 用户昵称
const defaultParams = {
    activity_id: route.query.activity_id, //活动ID
    groupchat_id: '', //群ID
    nickname: '' //昵称
};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const tableOption = [
    {
        prop: 'serial_num',
        label: '序号',
        width: 60
    },
    {
        prop: 'name',
        label: '用户信息',
        width: 200,
        render: reNderUserDetail
    },
    {
        prop: 'is_friend',
        label: '是否企微好友',
        width: 200,
        render({ row, column, index }: any) {
            return <div>{row.is_friend == 1 ? '否' : '是'}</div>;
        }
    },
    {
        prop: 'total_day',
        label: '当前群累计打卡天数',
        width: 200,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 300px;">
                    该用户在当前群聊中有效打卡的天数累计（有效打卡：该用户参与该活动每天打卡时间内的第一次打卡）
                </div>
            );
            return (
                <div class="box-item-div">
                    <span>当前群累计打卡天数</span>
                    <el-tooltip placement="top" effect="dark" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    },
    {
        prop: 'total_points',
        label: '当前群累计积分奖励',
        width: 200,
        renderHeader: () => {
            const defaultContent = () => (
                <div style="width: 300px;">
                    该用户在当前群聊中有效打卡后获得的积分奖励的积分值累计（有效打卡：该用户参与该活动每天打卡时间内的第一次打卡）
                </div>
            );
            return (
                <div class="box-item-div">
                    <span>当前群累计积分奖励</span>
                    <el-tooltip placement="top" effect="dark" vSlots={{ content: defaultContent }}>
                        <el-icon class="box-icon">
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                </div>
            );
        }
    },
    {
        prop: 'last_clock_time',
        label: '当前群最近一次打卡时间',
        minWidth: 200
    },
    {
        prop: 'groupchat_name',
        label: '打卡群聊',
        width: 300,
        render: renderGroupDetail
    },
    {
        prop: 'operate',
        label: '操作',
        width: 210,
        fixed: 'right',
        isOperate: true,
        option: [
            {
                name: '查看打卡记录',
                authCode: '',
                click: (row: any) => viewRecords(row)
            }
        ]
    }
];
const fetchApi = () => {
    return punchCardList;
};
/**
 * 打开打卡用户明细弹窗
 * @param val 选中列的信息
 */
const openClockDetail = (val: any) => {
    nickname.value = '';
    defaultParams.nickname = '';
    state.searchParams.nickname = '';
    state.searchParams.groupchat_id = val.id;
    defaultParams.groupchat_id = val.id;
    zwRef.value.width = '1000px';
    zwRef.value.title = '打卡用户明细';
    zwRef.value.isShow = false;
    zwRef.value.drawer = true;
};
/**
 * 选中打卡记录按钮
 * @param val 选中列的信息
 */
const viewRecords = (val: any) => {
    clockRecordsRef.value.openClockRecords(val);
};
/**
 * 切换搜索栏的用户昵称
 */
const changeNickname = () => {
    defaultParams.nickname = nickname.value;
    if (defaultParams.nickname) {
        defaultParams.nickname = defaultParams.nickname.trim();
    }
    state.searchParams = { ...deepCopy(defaultParams) };
};
defineExpose({
    openClockDetail
});
</script>
<style lang="scss" scoped>
.container {
    height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;

    .user-nickname {
        width: 335px;
    }

    .container-table {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        background-color: #fff;
        flex: 1;

        .zw-table {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;

            :deep(.el-table) {
                flex: 1;

                .el-table__empty-block {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}

:deep(.record-info) {
    display: flex;
    align-items: center;

    .record-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

    .group-record-avatar {
        border-radius: 4px;
    }

    .record-name {
        margin: 0 8px;
    }
}

:deep(.el-drawer .el-drawer__footer) {
    border: none;
}
</style>
